<template>
    <div class="content_index">
      <div class="ci_header">
        <div class="ci_left">吊销列表</div>
      </div>
      <div class="ci_note">
        <DescriptionBlock data="展示吊销列表" />
      </div>
      <div class="ci_des">
        <div style="display: flex">
        </div>
        <div style="display: flex">
          <!-- 搜索框 -->
          <el-input
            style="margin-right: 10px"
            class="ci_input"
            v-if="userType === '1'"
            v-model="issuerName"
            clearable
            placeholder="请输入发证方名称"
          ></el-input>
          <el-input
            style="margin-right: 10px"
            class="ci_input"
            clearable
            v-model="credentialName"
            placeholder="请输入凭证名称"
          ></el-input>
          <div @click="search">
            <el-button plain>查询 </el-button>
          </div>
        </div>
      </div>
      <div class="ci_content">
        <div class="table_list">
          <div class="tl_table">
            <el-table
              v-loading="RevokeLoading"
              :data="tableData"
              height="100%"
              width="100%"
              :header-cell-style="tableHeaderStyle"
              :cell-style="tableCellStyle"
            >
              <el-table-column prop="credentialId" label="凭证编号" width="150">
                <template v-slot="scope">
                  <el-tooltip
                    effect="light"
                    :content="scope.row.credentialId"
                    placement="top"
                  >
                    <div class="center_start">
                      <span
                        class="ellipsis"
                      >
                        {{ scope.row.credentialId }}
                      </span>
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="credentialName" label="凭证名称" />
              <el-table-column
                prop="issuerName"
                label="发证方名称"
                v-if="userType == '1'"
              />
              <el-table-column prop="issuerDid" v-if="userType == '1'" label="发证方DID">
                <template v-slot="scope">
                  <el-tooltip
                    effect="light"
                    :content="scope.row.issuerDid"
                    placement="top"
                  >
                    <div class="center_start">
                      <span class="ellipsis">
                        {{ scope.row.issuerDid }}
                      </span>
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="cptId" label="CPT编号">
                <template v-slot="scope">
                  <el-tooltip
                    effect="light"
                    :content="scope.row.cptId"
                    placement="top"
                  >
                    <div class="center_start">
                      <span class="ellipsis">
                        {{ scope.row.cptId }}
                      </span>
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="createdTime" label="创建时间" />
              <el-table-column prop="revokeDate" label="吊销时间" />
            </el-table>
          </div>
          <div class="tl_table_pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              :hide-on-single-page="page.isPageHide"
              @current-change="handleCurrentChange"
              :current-page.sync="page.pageNo"
              :page-size="page.pageSize"
              :page-sizes="[10, 15, 20, 30]"
              layout="total, prev, pager, next, sizes"
              :total="page.totalCount"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
        
        <script setup>
  import { DescriptionBlock } from "@/components/index";
  import { tableHeaderStyle, tableCellStyle } from "@/utils/tableStyle";
  import {
    RevokeListApi
  } from "@/api/Voucher";
  import { ref, reactive, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  import store from "@/store";
  const router = useRouter();
  const RevokeLoading = ref(false);
  const userType = ref("");
  const issuerName = ref("");
  const credentialName = ref("");
  const page = reactive({
    pageSize: 10,
    pageNo: 1,
    isPageHide: false,
    totalPage: 0,
    totalCount: 0,
  });
  const dialogWidth = ref("600px");
  const tableData = ref([]);
  const search = () => {
    getRevokeList();
  };
  const handleSizeChange = (val) => {
    page.pageNo = 1;
    page.pageSize = val;
    getRevokeList();
  };
  const handleCurrentChange = (val) => {
    page.pageNo = val;
    getRevokeList();
  };
  const setDialogWidth = () => {
    let val = document.body.clientWidth * 0.6;
    const def = 600; // 默认宽度
    if (val < def) {
      dialogWidth.value = "60%";
    } else {
      dialogWidth.value = def + "px";
    }
  };
  const getRevokeList = () => {
    let parmars = {
      pageNum: page.pageNo,
      pageSize: page.pageSize,
      issuerName: issuerName.value,
      credentialName: credentialName.value,
    };
    RevokeLoading.value = true;
    RevokeListApi(parmars)
      .then((res) => {
        if (res.success && res.data) {
          RevokeLoading.value = false;
          tableData.value = res.data.list || [];
          page.totalCount = res.data.totalCount;
        } else {
          RevokeLoading.value = false;
        }
      })
      .catch((err) => {
        ElMessage.error(err.msg);
        RevokeLoading.value = false;
      });
  };
  onMounted(() => {
    userType.value = store.userStore?.user?.userType;
    setDialogWidth();
    getRevokeList();
  });
  </script>
        <style lang="scss" scoped>
  @import "../../assets/css/list.scss";
  @import "../../assets/css/position.scss";
  
  .content_index {
    :deep.el-input {
      width: 90%;
      max-width: 400px;
    }
    :deep .iconfont__header_icon {
      width: 16px;
      margin-top: 8px;
    }
    .title_personal {
      font-size: 16px;
      font-weight: 700;
    }
    .tl_table_pagination {
      width: 100%;
      display: flex;
      justify-content: end;
      padding-right: 16px;
    }
  }
  .content_index {
    :deep.el-select {
      width: 95%;
      border-radius: 0;
  
      :deep .el-input {
        width: 95%;
        border-radius: 0 !important;
      }
      .el-input__suffix {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        border-radius: 0;
        font-size: 12px;
      }
    }
  }
  
  .aitem {
    cursor: pointer;
    color: #2186fb;
  }
  
  .nodata_tips {
    margin-left: 5px;
    color: #2186fb;
    cursor: pointer;
  }
  .info_style {
    font-size: 12px;
    cursor: pointer;
    color: #409eff;
  }
  </style>